@import "../../styles/_mixins.less";
.articalBox{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 15px 0;
  box-sizing: border-box;
  .articalCard{
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
    &:hover{
      border: none;
      transition: background ease-in 0.3s;
      .CardToolTip{
        background: rgba(209, 209, 209, 0.8);
      }
    }
    .articalTage{
      float: "left";
      z-index: 1;
      margin-left: "5px";
      cursor: "pointer";
    }
    &::after,&::before{
      position: absolute;
      content: "";
      border: 2px solid transparent;
      width: 0;
      height: 0;
      z-index: 0
    }
    &::after{
      bottom: 0;
      right: 0;
    }
    &::before{
      top: 0;
      left: 0;
    }
    &:hover::before,&:hover::after{
      width: 100%;
      height: 100%;
      z-index: 0
    }
    &:hover::before{
      border-top-color: #4361ee;
      border-left-color: #4361ee;
      transition: width 0.3s ease-out, height 0.3s ease-out;
    }
    &:hover::after{
      border-bottom-color: #4361ee;
      border-right-color: #4361ee;
      transition: border-color 0.3s ease-out, width 0.3s ease-out,height 0.3s ease-out;
    }
  }
  .ant-tag > .anticon + span{
    margin: 0;
    z-index: 1
  }
  .ant-card-cover{
    height: 180px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ant-card-body{
    height: 180px;
    width: calc(100% - 2px);
    position: absolute;
    right: 0;
    top: 57px;
    padding: 0;
    .CardToolTip{
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(209, 209, 209, 0);
      .Text_overflow_clamp(6)
    }
  }
  .ant-tag-processing{
    padding: 0 4px
  }
}
